<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="container visible-lg visible-md">

	<div id="info">
		<h2><img src="./image/mypage_img.jpg"/></h2>
	</div>
	
	<!-- MyPage -->
	<div id="myPage">
	
		<c:if test="${talkStart == 'F' }">
			<div id="talkStart" align="center">
				<font size="4" color="red">ID : ${p_id}님께서 ${name}님께 파트너 대화를 신청하셨습니다.</font><br><a href="talk.do">대화를 시작해보세요!!</a><br>
			</div>
		</c:if>
		<c:if test="${talkStart != 'F' }">
			<br>
		</c:if>
	
		<div id="left">
		
			<!-- 추천목록 -->
			<div id="recommend">
				<form id="recommendForm" name="recommendForm" role="form" class="form-horizontal">
					
					<div id="name" align="center">
						<img src="./image/mypage4.png"/><br><img src="./image/bar.png" width=390px;/>
					</div>
					
					<div class="row" style="margin-top:20px;margin-left:12%;">
						<div class="col-md-9" style="float:none;">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

								<!-- item -->
								<div class="carousel-inner" align="center">
									<div class="item active">
										<img src="./image/recommand.jpg" alt="First-slide" width="200px" height="250px">
									</div>
									<c:forEach var="recomList" items="${recomList}">
										<div class="item" style=" height:158px;">
											<a href="listDetail.do?detail_id=${recomList.id}">
												<img src="${pageContext.request.contextPath}/upload/${recomList.image}" alt="First-slide" width="200px" height="250px">
											</a>
										</div>
									</c:forEach>
								</div>
					
								<!-- controls -->
								<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
						</div>
					</div>
				</form>
			</div>
		
			<!-- 프로필 -->
			<div id="myProfil">
				<form id="myPageForm" name="myPageForm" role="form" class="form-horizontal">
					<input type="hidden" id="id" name="id" value="${myProfil.id}"/>
					<div class="form-group">
						<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center">
							<img src="./image/mypage3.png"/><br><img src="./image/bar.png" width=410px;/>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-4 col-xs-4 col-sm-4">
				 			<img src="${pageContext.request.contextPath}/upload/${myProfil.image}" width="130px" height="150px">
						</div>
						<div class="col-md-8 col-xs-8 col-sm-8">
							<label for="age" class="col-md-6 col-xs-6 col-sm-6 control-label">나이</label>
							<label id="label" for="age" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.age} 세</label>
					
							<label for="height" class="col-md-6 col-xs-6 col-sm-6 control-label">키</label>
							<label id="label" for="height" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.height} cm</label>
					
							<label for="home" class="col-md-6 col-xs-6 col-sm-6 control-label">거주지</label>
							<label id="label" for="home" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.home}</label>
					
							<label for="bodyty" class="col-md-6 col-xs-6 col-sm-6 control-label">체형</label>
							<label id="label" for="bodyty" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.bodyty}</label>
					
							<label for="charac" class="col-md-6 col-xs-6 col-sm-6 control-label">성격</label>
							<label id="label" for="charac" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.charac}</label>
					
							<label for="job" class="col-md-6 col-xs-6 col-sm-6 control-label">직업</label>
							<label id="label" for="job" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.job}</label>
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-md-12 col-xs-12 col-sm-12">
							<label for="fashion" class="col-md-4 col-xs-4 col-sm-4 control-label">패션스타일</label>
							<label id="label" for="fashion" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.fashion}</label>
				
							<label for="bloodty" class="col-md-4 col-xs-4 col-sm-4 control-label">혈액형</label>
							<label id="label" for="bloodty" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.bloodty}</label>
				
							<label for="smoke" class="col-md-4 col-xs-4 col-sm-4 control-label">흡연여부</label>
							<label id="label" for="smoke" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.smoke}</label>
				
							<label for="content" class="col-md-4 col-xs-4 col-sm-4 control-label">자기소개</label>
							<label id="label" for="content" class="col-md-8 col-xs-8 col-sm-8 control-label content">${myProfil.content}</label>
						</div>
					</div>
				</form>
			</div>
		</div>
	
		<div id="right">
			
			<!-- 쪽지리스트 -->
			<div id="threeMessageForm">
				<div class="form-group">
					<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center" style="padding-left:0px;">
						<img src="./image/mypage1.png"/><br><img src="./image/bar.png" width=390px;/>
					</div>
				</div>
				<table class="table col-md-12 col-xs-12 col-sm-12">
					<tr>
						<th>보낸이</th>
						<th>내용</th>
						<th>날짜</th>
					</tr>
					<c:forEach var="messages" items="${threeMessage }">
						<tr>
							<td align="center"><a href="/SomeTalk/messageSend.do?sendId=${messages.senderid }">${messages.senderid }</a></td>
							<td align="center"><a href="/SomeTalk/messageView.do?num=${messages.num }">${messages.content }</a></td>
							<td align="center">${messages.reg_date }</td>
						</tr>
					</c:forEach>
				</table>
			</div>
			
			<!-- 관심리스트 -->
			<div id="wishList">
			
				<form id="wishForm" name="wishForm" role="form" class="form-horizontal">
					<div class="form-group">
						<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center">
							<img src="./image/mypage2.png"/><br><img src="./image/bar.png" width=390px;/>
						</div>
					</div>
			
					<c:if test="${empty list}">
						<div class="form-group">
							<div id="nothing" class="col-md-12 col-xs-12 col-sm-12" align="center">
								 관심 이성을 찜해보세요 ★
							</div>
						</div>
					</c:if>
			
					<c:if test="${!empty list}">
						<div id="wishTable">
							<table class="wishTable" >
								<tr id="tableTitle">
									<th>이미지</th>
									<th>이름</th>
									<th>나이</th>
									<th>거주지</th>
								</tr>
								<c:forEach var="wishList" items="${list}">
									<tr>
										<td align="center">
											<a href="listDetail.do?detail_id=${wishList.id}">
												<img src="${pageContext.request.contextPath}/upload/${wishList.image}" width="70px" height="70px">
											</a>
										</td>
										<td align="center">${wishList.name}</td>
										<td align="center">${wishList.age}</td>
										<td align="center">${wishList.home}</td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</c:if>
				</form>
			</div>
		</div>
	
	</div>
	
</div>
<div class="container2 hidden-lg hidden-md">
	
	<div id="info2">
		<h2><img src="./image/mypage_img.jpg"/></h2>
	</div>
	
	<!-- MyPage -->
	<div id="myPage2">
	
		<c:if test="${talkStart == 'F' }">
			<div id="talkStart" align="center">
				<font size="4" color="red">ID : ${p_id}님께서 ${name}님께 파트너 대화를 신청하셨습니다.</font><br><a href="talk.do">대화를 시작해보세요!!</a><br>
			</div>
		</c:if>
		<c:if test="${talkStart != 'F' }">
			<br>
		</c:if>
		
			<!-- 추천목록 -->
			<div id="recommend2">
				<form id="recommendForm" name="recommendForm" role="form" class="form-horizontal">
					
					<div id="name" align="center">
						<img src="./image/mypage4.png"/><br><img src="./image/bar.png" width=390px;/>
					</div>
					
					<div class="row" style="margin-top:10px;">
						<div class="col-md-9" style="float:none;">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

								<!-- item -->
								<div class="carousel-inner" align="center">
									<div class="item active">
										<img src="./image/recommand.jpg" alt="First-slide" width="200px" height="250px">
									</div>
									<c:forEach var="recomList" items="${recomList}">
										<div class="item" style=" height:158px;">
											<a href="listDetail.do?detail_id=${recomList.id}">
												<img src="${pageContext.request.contextPath}/upload/${recomList.image}" alt="First-slide" width="200px" height="250px">
											</a>
										</div>
									</c:forEach>
								</div>
					
								<!-- controls -->
								<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
						</div>
					</div>
				</form>
			</div>
		
			<!-- 관심리스트 -->
			<div id="wishList2">
			
				<form id="wishForm" name="wishForm" role="form" class="form-horizontal">
					<div class="form-group">
						<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center">
							<img src="./image/mypage2.png"/><br><img src="./image/bar.png" width=390px;/>
						</div>
					</div>
			
					<c:if test="${empty list}">
						<div class="form-group" style="margin-top:10px;">
							<div id="nothing" class="col-md-12 col-xs-12 col-sm-12" align="center">
								 관심 이성을 찜해보세요 ★
							</div>
						</div>
					</c:if>
			
					<c:if test="${!empty list}">
						<div id="wishTable" style="margin-top:10px;">
							<table class="wishTable" >
								<tr id="tableTitle">
									<th>이미지</th>
									<th>이름</th>
									<th>나이</th>
									<th>거주지</th>
								</tr>
								<c:forEach var="wishList" items="${list}">
									<tr>
										<td align="center">
											<a href="listDetail.do?detail_id=${wishList.id}">
												<img src="${pageContext.request.contextPath}/upload/${wishList.image}" width="70px" height="70px">
											</a>
										</td>
										<td align="center">${wishList.name}</td>
										<td align="center">${wishList.age}</td>
										<td align="center">${wishList.home}</td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</c:if>
				</form>
			</div>
		
			<!-- 프로필 -->
			<div id="myProfil2">
				<form id="myPageForm" name="myPageForm" role="form" class="form-horizontal">
					<input type="hidden" id="id" name="id" value="${myProfil.id}"/>
					<div class="form-group">
						<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center">
							<img src="./image/mypage3.png"/><br><img src="./image/bar.png" width=390px;/>
						</div>
					</div>
					<div class="form-group" style="margin-top:10px;">
						<div class="col-md-4 col-xs-4 col-sm-4">
				 			<img src="${pageContext.request.contextPath}/upload/${myProfil.image}" width="130px" height="150px">
						</div>
						<div class="col-md-8 col-xs-8 col-sm-8">
							<label for="age" class="col-md-6 col-xs-6 col-sm-6 control-label">나이</label>
							<label id="label" for="age" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.age} 세</label>
					
							<label for="height" class="col-md-6 col-xs-6 col-sm-6 control-label">키</label>
							<label id="label" for="height" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.height} cm</label>
					
							<label for="home" class="col-md-6 col-xs-6 col-sm-6 control-label">거주지</label>
							<label id="label" for="home" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.home}</label>
					
							<label for="bodyty" class="col-md-6 col-xs-6 col-sm-6 control-label">체형</label>
							<label id="label" for="bodyty" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.bodyty}</label>
					
							<label for="charac" class="col-md-6 col-xs-6 col-sm-6 control-label">성격</label>
							<label id="label" for="charac" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.charac}</label>
					
							<label for="job" class="col-md-6 col-xs-6 col-sm-6 control-label">직업</label>
							<label id="label" for="job" class="col-md-6 col-xs-6 col-sm-6 control-label">${myProfil.job}</label>
						</div>
					</div>
					
					<div class="form-group" style="margin-top:10px;">
						<div class="col-md-12 col-xs-12 col-sm-12">
							<label for="fashion" class="col-md-4 col-xs-4 col-sm-4 control-label">패션스타일</label>
							<label id="label" for="fashion" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.fashion}</label>
				
							<label for="bloodty" class="col-md-4 col-xs-4 col-sm-4 control-label">혈액형</label>
							<label id="label" for="bloodty" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.bloodty}</label>
				
							<label for="smoke" class="col-md-4 col-xs-4 col-sm-4 control-label">흡연여부</label>
							<label id="label" for="smoke" class="col-md-8 col-xs-8 col-sm-8 control-label">${myProfil.smoke}</label>
				
							<label for="content" class="col-md-4 col-xs-4 col-sm-4 control-label">자기소개</label>
							<label id="label" for="content" class="col-md-8 col-xs-8 col-sm-8 control-label content">${myProfil.content}</label>
						</div>
					</div>
				</form>
			</div>
	
			<!-- 쪽지리스트 -->
			<div id="threeMessageForm2">
				<div class="form-group">
					<div id="name" class="col-md-12 col-xs-12 col-sm-12" align="center">
						<img src="./image/mypage1.png"/><br><img src="./image/bar.png" width=390px;/>
					</div>
				</div>
				<table class="table col-md-12 col-xs-12 col-sm-12" style="margin-top:10px;">
					<tr>
						<th>보낸이</th>
						<th>내용</th>
						<th>날짜</th>
					</tr>
					<c:forEach var="messages" items="${threeMessage }">
						<tr>
							<td align="center"><a href="/SomeTalk/messageSend.do?sendId=${messages.senderid }">${messages.senderid }</a></td>
							<td align="center"><a href="/SomeTalk/messageView.do?num=${messages.num }">${messages.content }</a></td>
							<td align="center">${messages.reg_date }</td>
						</tr>
					</c:forEach>
				</table>
			</div>

	</div>
</div>
